<?php
    // 防止用户输入奇怪的字符整崩系统
    function input_filter($x) {
        return htmlspecialchars(trim(stripslashes($x)));
    }

    // 登录信息核验
    function check_login_info($un, $up) {
        // 和数据库文件storage.db建立连接
        // sqlite: 表示这是一个sqlite数据库 不是mysql啥的其他数据库
        $conn = new PDO("sqlite:storage.db");
        // SQL语句 问号类似于C语言的%s 作占位符
        // 占位符将在下文中发挥作用
        $sql_command = <<<EOF
select * from user where
    name=? and password=?
EOF;
        $sql_run = $conn->prepare($sql_command);  // 让 数据库的连接 做好执行的准备
        $sql_run->execute([$un, $up]);  // 为占位符填上内容 同时执行SQL语句
        $temp = $sql_run->fetchAll();  // 把select到的所有行变成一个数组 塞进$temp里
        $conn = null;  // 关闭数据库连接 其实这一步是多余的 可以删掉
        if (count($temp)) {
            // 如果选择到东西了 说明用户输入对了用户名和密码 返回这用户是不是管理员 和用户的id
            // 注意 返回的是一个数组 数组里的东西都是字符串 都是字符串 都是字符串
            return [$temp[0]["is_admin"], $temp[0]["sid"]];
        }
        // 啥都没找到 说明用户输错了 返回一个空的数组
        return [];
    }

    // 设置一下编码 其实是多余的
    header('Content-type:text/html;charset=utf-8');
    // submit_press就是本页登录按钮的名字
    // 检测到isset($_POST["submit_press"]) 说明这个按钮被按下去了
    // 从而开始核验用户信息
    // 如果没检测到 那么就是一次普通的访问 不核验用户信息
    if (isset($_POST["submit_press"])) {
        // 同理 这是在检测是否收到了提交的用户名和用户密码
        if (isset($_POST["uname"])
            and isset($_POST["upass"])) {
            $username = input_filter($_POST["uname"]);
            $password = input_filter($_POST["upass"]);

            $temp = check_login_info($username, $password);
            if (empty($temp)) {
                // 如果检测到empty($temp) 说明输错了用户信息 还记得return [];吗?
                echo "<script>alert('Wrong username or password!');</script>";
            } else {
                $is_admin = $temp[0];
                $sid = $temp[1];
                setcookie("cur_user", $username, time() + 3600);
                setcookie("cur_sid", $sid, time() + 3600);
                if ($is_admin === "0") {
                    echo <<<EOF
<script>
window.location.href="stuCourseAvailable.php"
</script>
EOF;
                }
            }
        }
    }
?>

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Welcome</title>
        <link href="bootstrap_min.css" rel="stylesheet">
        <style>
            body {
                background-image: url("img/login-bg.jpg");
                background-size: 100vw;
                background-repeat: no-repeat;
            }

            #login-pad {
                background-color: rgba(255, 255, 255, 0.97);
                border-radius: 4%;
                padding: 6%;
            }

            #login-pad > h3 {
                font-family: Sansation, sans-serif;
            }
        </style>
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">
                    <span>Registration</span>
                </a>
            </div>
        </nav>

        <div class="container">
            <div class="row">
                <div class="col-md"></div>
                <div class="col-md">
                    <form method="post" action="index.php" target="_top">
                        <div id="login-pad">
                            <h3 class="text-center mb-4">LOGIN</h3>

                            <div class="input-group mb-4">
                                <input type="text" name="uname" class="form-control" placeholder="Your User ID">
                            </div>
                            <div class="input-group mb-4">
                                <input type="text" name="upass" class="form-control" placeholder="Your Password">
                            </div>

                            <div class="d-grid mx-auto">
                                <button type="submit" name="submit_press" class="btn btn-outline-primary">Login</button>
                            </div>
                        </div>
                        <script>
                            let target_pad = document.getElementById("login-pad");
                            function adjust() {
                                let padH = target_pad.offsetHeight / 2;
                                target_pad.style.marginTop = "calc(50% - " + padH + "px)";
                            }
                            adjust();
                            window.onresize = adjust;
                        </script>
                    </form>
                </div>
            </div>
        </div>

        <script src="bootstrap_js.js"></script>
        <script>
            let target_body = document.body;
            window.onresize = function() {
                let screenW = window.innerWidth;
                let screenH = window.innerHeight;
                console.log(screenW, screenH);
                if (screenW / screenH <= 1.4) {
                    target_body.style.backgroundSize = "auto 100vh";
                } else {
                    target_body.style.backgroundSize = "100vw";
                }
            };
        </script>
    </body>
</html>
